<template>
  <div>
    <p>生命周期</p>
      <p>
          beforeCreate      - setup()            开始创建组件之前，创建的是`data`和`method`<br>
          created           - setup()                                                     <br>
          beforeMount       - onBeforeMount      组件挂载到节点上之前执行的函数；                <br>
          mounted           - onMounted          组件挂载完成后执行的函数；<br>
          beforeUpdate      - onBeforeUpdate     组件更新之前执行的函数；<br>
          updated           - onUpdated          组件更新完成之后执行的函数；<br>
          beforeDestroy     - onBeforeUnmount    组件卸载之前执行的函数；<br>
          destroyed         - onUnmounted        组件卸载完成后执行的函数；<br>
          activated         - onActivated        被包含在'keep-alive'中的组件，被激活时执行；<br>
          deactivated       - onDeactivated      比如从 A 组件，切换到 B 组件，A 组件消失时执行；<br>
          errorCaptured     - onErrorCaptured    当捕获一个来自子孙组件的异常时激活钩子函数。<br>
      </p>
      <p>{{msg}}</p>
      <button @click="cli()">点击更新</button>
      <button @click="go">跳转</button>
  </div>
</template>

<script lang='ts'>
import {reactive,  toRefs,defineComponent,onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted,onBeforeUnmount} from 'vue'
//setup  不需要引入
 import { useRouter } from 'vue-router'
export default defineComponent({
  setup(){
    console.log('setup--------------')
    let state=reactive({
      msg:520,




      //methods 也可以写在这里
      go(){
        router.push('/tx')
      }
    })
    
    //生命周期需要写在setup 里面

    onMounted(()=>console.log('onMounted----'))
    onBeforeMount(()=>{console.log('onBeforeMount----')})

    onBeforeUpdate(()=>{console.log('onBeforeUpdate --------')})
    onUpdated(()=>{console.log('onUpDate-----------')})

    onBeforeUnmount(()=>{console.log('onBeforeUnmount-------')})
    onUnmounted(()=>{console.log('onUnMounted-----------')})

   //使用路由
   const router = useRouter()


   //methods   html中要用到的需要return出去 或者直接写在reactive里面
   let cli=()=>{
    state.msg++

   }
   let go=()=>{
     router.push('/tx')
   }


    return {
      ...toRefs(state),
      cli,go
    }
  },
  
})
</script>

<style>

</style>